<template>
	<view class="setting">
		<view class="top">
			<navigator url="/pages/self/edit" hover-class="none" class="list flex-between">
				<view class="left">
					<view class="h3">个人信息</view>
					<text>头像、昵称、简介信息</text>
				</view>
				<image src="/static/arrow.png" mode="widthFix"></image>
			</navigator>
			<navigator url="/pages/self/edit" hover-class="none" class="list flex-between">
				<view class="left">
					<view class="h3">账户与安全</view>
					<text>修改密码、修改手机号、账号绑定管理</text>
				</view>
				<image src="/static/arrow.png" mode="widthFix"></image>
			</navigator>
		</view>
		<view class="bottom">
			<navigator url="/pages/self/doc?title=关于社区" hover-class="none" class="list flex-between">
				<view class="h3">关于Lakin社区</view>
				<image src="/static/arrow.png" mode="widthFix"></image>
			</navigator>
			<navigator url="/pages/self/doc?title=用户协议" hover-class="none" class="list flex-between">
				<view class="h3">用户协议</view>
				<image src="/static/arrow.png" mode="widthFix"></image>
			</navigator>
			<navigator url="/pages/self/doc?title=隐私政策" hover-class="none" class="list flex-between">
				<view class="h3">隐私政策</view>
				<image src="/static/arrow.png" mode="widthFix"></image>
			</navigator>
			<view class="list flex-between">
				<view class="h3">版本号</view>
				<text>v1.22</text>
			</view>
		</view>
		<button class="flex-center" @click="loginout">退出登录</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		methods:{
			loginout(){
				uni.showModal({
					title:'提示',
					content:'是否确认退出登录？',
					success:r=>{
						if(r.confirm){
							uni.reLaunch({
								url:'/pages/index/login'
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="less">
	page{
		background: white;
	}
	@color: #d4237a;
	.setting{
		.top{
			padding: 0 24rpx;
			background: white;
			border-bottom: 24rpx solid #f6f7f8;
			border-top: 24rpx solid #f6f7f8;
		}
		.bottom{
			padding: 0 24rpx;
		}
		.list{
			height: 130rpx;
			border-bottom: 1px solid #eee;
			.h3{
				font-size: 32rpx;
				font-weight: bold;
			}
			text{
				font-size: 26rpx;
				color:#999;
			}
			image{
				width: 30rpx;
				height: auto;
			}
		}
		button{
			margin: 100rpx 200rpx;
			background: @color;
			color:white;
			font-size: 30rpx;
		}
	}
</style>
